<template>
  <div id="app">
    <tab v-if="showNavbar">
      <tab-item v-for="(item, index) in tabList" :key="index" @on-item-click="goUrl(item.link)">{{item.text}}</tab-item>
    </tab>
    <router-view />
    <div class="player">
      <div class="normal-player"></div>
      <div class="mini-player">
        <div class="cover">
          <div class="img-wrapper"></div>
        </div>
        <div class="text">
          <div class="song-title">少年</div>
          <div class="singer">梦然</div>
        </div>
        <div class="control">
          <x-icon type="ios-ionic-outline" size="30"></x-icon>
        </div>
        <div class="list">
          <x-icon type="ios-star" size="30"></x-icon>
        </div>
      </div>
    </div>

  </div>
</template>

<script>
import { Tab, TabItem, Drawer } from 'vux'
import Utils from './libs/utils'
export default {
  name: 'app',
  components: { Tab, TabItem, Drawer },
  data () {
    return {
      tabList: [
        {
          text: '推荐',
          name: 'index',
          link: '/'
        },
        {
          text: '排行榜',
          name: 'topLists',
          link: '/topLists'
        },
        {
          text: '搜索',
          name: 'search',
          link: '/search'
        }
      ],
      showNavbar: true,
      route: this.$route.params
    }
  },
  watch: {
    $route(val, old){
      let navS = []
      this.tabList.map((v, i) => {
        navS.push(v.name)
      })
      this.showNavbar = Utils.inArray(val.name, navS)
    }
  },
  methods: {
    goUrl (link) {
      console.log(this.route)
      this.$router.push({path: link})
    }
  }
}
</script>

<style lang="less">
@import '~vux/src/styles/reset.less';
@import '~vux/src/styles/close.less';

body {
  /*background-color: #fbf9fe;*/
  .normal-player {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 150;
    display: none;
    background-color: #222;
  }
  .mini-player{
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    height: 60px;
    background: #333;
    z-index: 150;
    display: flex;
    align-items: center;
    padding: 0 10px;
    .cover{
      width: 40px;
      height: 40px;
      border-radius: 40px;
      background: url('http://y.gtimg.cn/music/photo_new/T002R300x300M000000EI9tu27e5iy.jpg');
      background-size: 100%;
      animation: rot_test 3s infinite linear;

      @keyframes rot_test{
        0% {
          transform: rotate(0deg);
        }
        50% {
          transform: rotate(180deg);
        }
        100% {
          transform: rotate(360deg);
        }
      }
      .img-wrapper{}
    }
    .text {
      display: flex;
      padding-left: 15px;
      flex: 1;
      flex-direction: column;
      .song-title{
        font-size: 1.1rem;
        color: #FFF;
      }
      .singer{
        font-size: 0.9rem;
        color: hsla(0,0%,100%,.3);
      }
    }
    .control {
      width: 30px;
      padding: 0 .6rem 0 0;
    }
    .list{
      width: 30px;
      padding: 0 .6rem 0 0;
    }
  }
}

</style>
